<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
      <el-form-item label="报告模板编号" prop="num">
        <el-input v-model="queryParams.num" clearable></el-input>
      </el-form-item>
      <el-form-item label="报告模板名称" prop="name">
        <el-input v-model="queryParams.name" clearable></el-input>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button plain @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="Plus" @click="add">新增</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" ref="tableRef" :data="dataList" stripe>
      <!-- <el-table-column label="序号" type="index" align="center" width="55" /> -->
      <el-table-column label="报告模板编号" prop="num" align="center">
        <template #default="{ row }">
          <el-link :underline="false" type="primary" @click="viewDetail(row.id)">
            {{ row.num }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="报告模板名称" prop="name" align="center" />
      <el-table-column label="报告类型" prop="reportType" align="center">
        <template #default="{ row }">
          <span>{{ reportTypeOptions?.find(item => item.dictId == row.reportType)?.dictName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="危险性数据" prop="input" align="center">
        <template #default="{ row }">
          <span>{{ dictOption[row.reportType]?.find(item => item.dictItemId == row.input)?.dictItemName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" prop="createUserName" align="center" />
      <el-table-column label="创建时间" prop="createTime" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button type="text" @click="deleteItem(row)">删除</el-button>
          <el-button type="text" @click="uploadItem(row)">上传</el-button>
          <el-button type="text" @click="downloadItem(row)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="queryParams.page"
      v-model:limit="queryParams.rows" @pagination="getList" ref="pagination" />

    <ReportForm v-model:open="formOpen" v-model:id="detailId" @save="getList" />
    <UploadDoc v-model:open="uploadOpen" :file="['doc', 'docx']" :limit="1" @confirm="confirm" />
  </div>
</template>
<script setup>
import ReportForm from './reportForm.vue'
import { list, deleteList, upload } from '@/api/searchExport/report/templateManage'
import UploadDoc from '../components/upload.vue'
import { getInputOptions, getReportTypeOptions } from '@/api/searchExport/report/templateManage'

const { proxy } = getCurrentInstance()

const queryParams = ref({
  page: 1,
  rows: 10
})
const total = ref(0)
const loading = ref(false)
const dataList = ref([])
const dictOption = ref({})

// 查询
const handleQuery = () => {
  getList()
}

// 重置
const resetQuery = () => {
  proxy.resetForm('queryRef')
  handleQuery()
}

// 新增
const formOpen = ref(false)
const add = () => {
  formOpen.value = true
}
const getList = () => {
  loading.value = true
  list(queryParams.value).then(res => {
    loading.value = false
    dataList.value = res.data?.rows || []
    total.value = res.data?.total || 0
    dataList.value.forEach(async (item) => {
      let result = await getInputOptions({ dictId: item.reportType })
      dictOption.value[item.reportType] = result.data
    });
  })
}

// 详情
const detailId = ref('')
const viewDetail = id => {
  formOpen.value = true
  detailId.value = id
}

// 删除
const deleteItem = row => {
  proxy.$modal.confirm(`是否确定删除【${row.name}】？`).then(() => {
    return deleteList({ id: row.id })
  }).then(() => {
    proxy.$modal.msgSuccess('删除成功！')
    getList()
  })
}

// 上传
const uploadOpen = ref(false)
const uploadData = ref()
const uploadItem = row => {
  uploadOpen.value = true
  uploadData.value = {
    id: row.id,
    name: '',
    templateDesc: ''
  }
}

const confirm = file => {
  upload({ ...uploadData.value, attachId: file.attachId }).then(res => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess('上传成功！')
      uploadData.value = {}
      uploadOpen.value = false
    }
  })
}

// 下载
const downloadItem = row => {
  const { id, name } = row
  proxy.download("/template/downloadReportTemplate", { id }, `${name}.doc`, true);
}

const reportTypeOptions = ref([])
const getReportType = async () => {
  let res = await getReportTypeOptions({ dictDirId: 'fxqhpg_temp' })
  if (res.code == 200) {
    reportTypeOptions.value = res.data
  }
}
const inputOptions = ref([])
const getInput = async (dictId) => {
  let res = await getInputOptions({ dictId })
  if (res.code == 200) {
    inputOptions.value = res.data
  }
}

onMounted(() => {
  getList()
  getReportType()
})
</script>
<style scoped></style>